<template>
	<navbar title="我的报名" :isBack="true"></navbar>
	<!-- <Menu @change="changeMenu"></Menu> -->
	<loading v-if="!list.length && isFirst"></loading>
	<picture v-if="!list.length && !isFirst" title="暂无赛事订单" bg="#fff" imgPath="/static/image/18.png" imgHeight="200rpx"
		imgWidth="360rpx" :height="tools.clientTopHight(50)"></picture>
	<OrderList v-else :type="1" :list="list"></OrderList>
</template>

<script setup lang="ts">
	import { reactive, ref } from 'vue'
	import { onLoad, onReachBottom } from '@dcloudio/uni-app'
	import { getMatchOrder } from '@/service/api/user'
	import tools from '@/utils/tools'
	// import Menu from '@/common/menu/order.vue'
	import OrderList from '@/common/list/order.vue'

	// 列表数据
	let list = ref([])
	let isFirst = ref(true)
	let params = reactive({
		page: 1,
		state: 0
	})

	// 菜单索引
	const changeMenu = (index : number) => {
		list.value = []
		params.page = 1
		params.state = index
		// 我的赛事
		getMatchOrderApi()
	}

	// 我的赛事
	const getMatchOrderApi = async () => {
		const { msg } = await getMatchOrder(params)
		if (!msg.data.length && params.page != 1) {
			return tools.showToast('暂无更多数据'), params.page--
		}
		isFirst.value = false
		list.value = [...list.value, ...msg.data]
	}

	onLoad((option) => {
		// 我的赛事
		changeMenu(option.id)
	})

	onReachBottom(() => {
		params.page++
		// 我的赛事
		getMatchOrderApi()
	})
</script>

<style lang="scss" scoped>
	:deep(.loading) {
		margin-top: 100rpx;
	}
</style>